<template>
  <div class="d-flex justify-space-between title">
    <div class="d-flex headTitle">
      <span>{{ title }}</span>
      <v-icon :color="iconColor">mdi-{{ icon }}</v-icon>
    </div>
    <!-- <div class="d-flex extra">
      <span class="mr-2">{{ extraText }}</span>
      <v-icon>mdi-arrow-right-circle-outline</v-icon>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    title: {
      required: true,
      type: String
    },
    extraText: {
      required: false,
      type: String,
      default: '更多推荐'
    },
    extraLink: {
      required: false,
      type: String,
      default: '#'
    },
    icon: {
      required: false,
      type: String
    },
    iconColor: {
      required: false,
      type: String
    }
  }
};
</script>

<style lang="less" scoped>
.title {
  padding: 5px 15px;
  .headTitle {
    font-size: 14px;
  }
  > .extra {
    font-size: 12px;
    color: #999;
    i {
      font-size: 150%;
      color: #bbbbbb;
    }
  }
}
</style>
